<template>
  <div>
    <div class="flex-1 card-head">
      <a-card :bordered="false" :body-style="{ paddingTop: '0' }">
        <template #title> {{ t["素材库"] }} </template>
        <a-form
          :model="libraryQuery"
          :wrapper-col-props="{ span: 4 }"
          :label-col-props="{ span: 2 }"
          label-align="left"
          auto-label-width
        >
          <div class="flex flex-col">
            <div class="w-[300px]">
              <a-form-item :label="t['素材名称']">
                <a-input v-model="libraryQuery.name" allow-clear @change="listLibrary" />
              </a-form-item>
            </div>
            <div class="flex gap-12">
              <!-- <div>
                <a-form-item label="t['模式']">
                  <a-radio-group type="button" v-model="libraryQuery.mode" allow-clear class="w-[120px]"
                    :options="modeOption" @change="listLibrary" />
                </a-form-item>
              </div> -->
              <div class="w-[300px]">
                <a-form-item :label="t['素材类型']">
                  <a-select
                    v-model="libraryQuery.type"
                    allow-clear
                    class="w-[120px]"
                    :options="typeOptions"
                    @change="listLibrary"
                  />
                </a-form-item>
              </div>
              <div class="w-[300px]">
                <a-form-item :label="t['素材尺寸']">
                  <a-select
                    v-model="libraryQuery.sizeId"
                    allow-clear
                    class="w-[120px]"
                    :options="sizeOptions"
                    @change="listLibrary"
                  >
                  </a-select>
                </a-form-item>
              </div>
              <div class="w-[300px]">
                <a-form-item :label="t['数据范围']">
                  <Scope
                    class="w-[180px]"
                    v-model="libraryQuery.scope"
                    @change="listLibrary"
                    :include="['4', '-', '0', '5']"
                  >
                  </Scope>
                </a-form-item>
              </div>
            </div>
          </div>
          <div>
            <div class="flex gap-3">
              <a-button type="primary" @click="createLibrary">
                <template #icon>
                  <IconPlus />
                </template>
                {{ t["新建"] }}
              </a-button>
              <a-button @click="listLibrary">
                {{ t["刷新"] }}
              </a-button>
              <BatchUpload />
            </div>
          </div>
          <div>
            <div class="flex justify-end">
              <a-pagination
                show-total
                :total="libraryQuery.total!"
                :page-size="libraryQuery.pageSize"
                :current="libraryQuery.pageNum"
                @change="onChange"
              ></a-pagination>
            </div>
          </div>
        </a-form>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { createLibrary, listLibrary } from "../data/curd";
import { sizeOptions, typeOptions } from "../data/options";
import { libraryQuery } from "../data/table";
import BatchUpload from "../form/BatchUpload.vue";

const t = translate("公共模块");

const onChange = (page: number) => {
  libraryQuery.value.pageNum = page;
  listLibrary();
};
</script>

<style lang="scss" scoped>
.card-head {
  white-space: nowrap;
}
</style>
